html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button { margin: 0; padding: 0; border: 0; vertical-align: baseline; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-break: break-all; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; color: inherit; } input, textarea, button, select { border: none; } button { cursor: pointer; background: none; } input:focus, textarea:focus, button:focus, select:focus { outline: none; outline-offset: 0; } input { display: block; } .clearfix::after { content: ""; display: block; clear: both; }
body {
font-size: 16px;
font-family: "Microsoft YaHei", Arial;
-webkit-text-size-adjust: 100%;
font-size-adjust: none;
}
.left {
float: left;
}
.right {
float: right;
}
.f14 {
font-size: 14px;
}
.f16 {
font-size: 16px;
}
.f18 {
font-size: 18px;
}
.f20 {
font-size: 20px;
}
.f22 {
font-size: 22px;
}
.f24 {
font-size: 24px;
}
.f30 {
font-size: 30px;
}
.f36 {
font-size: 36px;
}
.colfff{
color: #fff;
}
.col000{
color: #000;
}
.col333 {
color: #333;
}
.col666{
color: #666;
}
.col999{
color: #999;
}
.maincol{
color: #0058B2;
}
.fbold{
font-weight: bold;
}
.hidden {
display: none;
}
.spe-block {
display: block;
width: 100%;
height: 100%;
}
.object-cover {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.pic-box .object-cover{
padding: 10px;
}
.overflow {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mshow {
display: none;
}
.mhide {
display: block;
}
.container {
/* width: 1600px; */
width: 100%;
padding: 0 162px;
margin: 0 auto;
}
.spe-container {
width: 1200px;
margin: 0 auto;
}
.comrow2 {
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.comrow3 {
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.comrow7 {
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
overflow: hidden;
}
.mcomrow5 {
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
.flex{
display: flex;
}
.spacebetween{
display: flex;
justify-content: space-between;
}
.aligncenter{
display: flex;
align-items: center;
}
.flexcenter{
display: flex;
align-items: center;
justify-content: center;
}
.transition {
transition: all .3s;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
.samebg{
background: #F9FAFA;
}
/* header */
header {
width: 100%;
}
header .top{
width: 100%;
height: 70px;
background: #FEFEFE;
}
header .top .container{
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
}
.logo-pic {
display: block;
width: 136px;
}
.contact-box .tel img{
margin-right: 5px;
}
.contact-box .icon{
margin-left: 26px;
padding-left: 20px;
position: relative;
}
.contact-box .icon::after{
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 38px;
background: #EAEEEF;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.contact-box .icon .qq{
margin-right:10px ;
}
.bshare-custom .bshare-weixin {
background: url(../img/weixin.png) no-repeat!important;
width: 36px;
height: 36px;
}
.bshare-custom .bshare-qqim {
background: url(../img/qq-icon.png) no-repeat!important;
width: 36px;
height: 36px;
}
.bsTop{
width: 100%!important;
}
.bsFrameDiv>div{
height: 210px!important;
}
.bsFrameDiv>div img{
margin: 16px!important;
}
header .nav-box{
width: 100%;
height: 81px;
color: #fff;
background: #0058B2;
}
/* .head-active .nav-box{
position: fixed;
top: 0 ;
left: 0;
z-index: 9999;
} */
header .nav-box .spe-container{
height: 81px;
line-height: 81px;
}
header .nav-box .search{
padding-top: 6px;
}
.nav{
flex: 1;
/* margin-right: 125px; */
}
.nav > ul {
display: flex;
justify-content: space-between;
height: 100%;
}
.nav ul .item {
height: 100%;
position: relative;
}
.nav ul .item a {
display: block;
height: 100%;
font-size: 16px;
text-align: center;
}
.nav ul .item:hover,
.nav ul .item.active {
color: #fff;
}
.nav ul .item:hover::after,
.nav ul .item.active::after{
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 3px;
background-color: rgb(255, 255, 255);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
z-index: 99;
}
header .nav-box .login{
margin-left: 10%;
}
/* header */
/* footer */
footer{
width: 100%;
height: 339px;
color: #fff;
background-image: url(../img/footer-bg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
}
footer .container{
position: relative;
z-index: 99;
display: flex;
justify-content: space-between;
height: 100%;
padding-top: 87px;
}
footer .logo-pic{
width: 202px;
margin-top: 60px;
}
/* footer .nav-menu,footer .contact-menu{
width: 273px;
} */
footer .footer-menu{
font-size: 14px;
}
footer .footer-menu .title{
padding-bottom: 39px;
}
footer .footer-menu .desc .item{
margin-bottom: 20px;
}
footer .nav-menu ul{
display: flex;
flex-wrap: wrap;
}
footer .nav-menu ul li{
width: 33.33%;
margin-bottom: 30px;
}
footer .nav-menu ul li a:hover{
padding-bottom: 4px;
border-bottom: 1px solid #fff;
}
footer .contact-menu .desc .tel{
display: flex;
align-items: center;
font-size: 28px;
font-weight: bold;
margin-top: 18px;
}
footer .footer-menu .desc>div img{
margin-right: 12px;
width: 34px;
height: 34px;
}
footer .footer-menu.last-menu .row .code{
width: 145px;
height: 146px;
}
footer .footer-menu.last-menu .row .menu-title{
text-align: center;
margin-top: 20px;
}
.copyright{
height: 60px;
line-height: 60px;
text-align: center;
background: #F9FAFA;
}
/* footer */
.same-more{
width: 119px;
height: 50px;
color: #fff;
background: #0058B2;
display: flex;
align-items: center;
justify-content: center;
}
.same-more:hover{
opacity: .8;
}
.same-more img{
width: 18px;
margin-left: 4px;
}
.about-panel .data-box{
width: 100%;
height: 179px;
background: #0058B2;
margin-top: 60px;
padding-top: 54px;
padding: 54px 120px 0 162px;
}
.about-panel .data-box ul{
width: 100%;
display: flex;
justify-content: space-between;
}
.about-panel .data-box ul .tnumber{
font-size: 47px;
font-weight: bold;
}
.about-panel .data-box ul .num{
position: relative;
margin-top: 10px;
}
.about-panel .data-box ul .num .add{
position: absolute;
top: 0;
right: 0;
font-size: 14px;
font-weight: bold;
}
.banner {
width: 100%;
position: relative;
overflow: hidden;
}
.banner .banner-name{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
}
.banner .icon{
position: absolute;
left: 50%;
bottom: -60px;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
/* 产品页面 */
.pro-show .bd .pic-box,.pro-lists ul li .pic-box{
height: 450px;
position: relative;
}
.pro-show .bd .swiper-slide .name,.pro-lists ul li .name{
text-align: center;
height: 62px;
line-height: 62px;
border-bottom: 1px solid #EAEEEF;
color: #333;
}
.pro-show .bd .swiper-slide .watch-more,.pro-lists ul li .watch-more{
width: 87%;
height: 374px;
background: rgba(0, 0, 0, .42);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
opacity: 0;
}
.pro-show .bd .swiper-slide .pic-box .watch-more{
width: 100%;
height: 100%;
}
.pro-show .bd .swiper-slide .watch-more a,.pro-lists ul li .watch-more .flexcenter{
width: 100%;
height: 100%;
flex-direction: column;
color: #fff;
}
.pro-show .bd .swiper-slide .watch-more a img,.pro-lists ul li .watch-more .flexcenter img{
margin-bottom: 18px;
}
.pro-show .bd .swiper-slide:hover .watch-more,.pro-lists ul li:hover .watch-more{
opacity: 1;
}
.pro-show .bd .swiper-slide:hover .name,.pro-lists ul li:hover .name{
color: #fff;
background: #0058B2;
}
.banner-box{
position: relative;
z-index: 999;
}
.news-panel .content ul li{
width: 32%;
position: relative;
}
.news-panel .content ul li .pic-box{
width: 100%;
height: 280px;
}
.news-panel .content ul li .desc{
text-align: center;
padding: 10px 15px;
background: rgba(255, 255, 255, .24);
line-height: 30px;
}
.news-panel .content ul li:hover .more-hidden{
display: block;
}
.page-btn{
margin-top: 46px;
}
.page-btn a{
cursor: pointer;
width: 50%;
}
.page-btn a:hover,
.page-btn a.active {
color: #0058B2;
}
.burger {
display: none;
}
.next,
.prev {
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 46px;
background: #fff;
position: absolute;
top: auto;
bottom: 20px;
z-index: 99;
outline: none;
}
.next::after,
.prev::after{
content: '';
width: 11px;
height: 20px;
background-image: url(../img/arrow-left.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.next:hover,
.prev:hover{
background: #0058B2;
}
.next:hover::after,
.prev:hover::after{
background-image: url(../img/arrow-right.png);
}
.next::after,.prev:hover::after{
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
.next:hover::after{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
.next {
right: 0;
}
.prev {
left: auto;
right: 70px;
}
.swiper-pagination-bullet{
width: 8px;
height: 8px;
background: #DADFE1;
position: relative;
opacity: 1;
}
/* .swiper-pagination-bullet::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 19px;
height: 19px;
background: rgba(255, 255, 255, .26);
border-radius: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
} */
.swiper-pagination-bullet-active{
width: 12px;
height: 12px;
background: #fff;
border: 1px solid #0058B2;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
margin: 0 8px;
}
/* 分页器 */
.page-box {
display: flex;
justify-content: center;
margin-top: 24px;
}
.pagination span{
display: inline-block;
padding: 8px 18px!important;
color: #999;
margin-right: 5px;
cursor: pointer;
}
.pagination span a{
font-size: 16px!important;
border-radius: 0!important;
padding: 0!important;
}
.pagination span:hover,.pagination span.active{
color: #fff;
background: #1C4A9D;
}
/* .page-box span{
display: flex;
justify-content: center;
align-items: center;
color: #999;
margin-right: 5px;
} */
/* .page-box a:last-child {
margin-right: 0;
}
.page-box a.first-page,.page-box a.last-page{
width: 61px;
} */
/* 联系我们 */
.connect .container{
position: absolute;
top: 116px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
.connect .container .spebanner-name .name{
padding-left: 15px;
position: relative;
}
.connect .container .spebanner-name .name::before{
content: '';
position: absolute;
top: 50%;
left: 0;
width: 3px;
height: 24px;
background: #FFFFFF;
transform: translateY(-50%);
border-radius: 2px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.connect .container .content{
margin-top: 30px;
}
.connect .container .content .left-box{
width: 49.7%;
height: 400px;
background: #fff;
padding: 65px 100px 0 25px;
}
.connect .container .content .right-box{
width: 49.7%;
height: 400px;
padding: 65px 100px 0 25px;
background-image: url(../img/con-bg.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.connect .container .content .left-box h3{
padding-bottom: 30px;
position: relative;
}
.connect .container .content .left-box .desc h3::after{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 21px;
height: 1px;
background: #0058B2;
}
.connect .container .content .left-box .desc .item{
margin-top: 30px;
}
.connect .container .content .left-box .desc .item img{
margin-right: 10px;
}
.connect .container .content .left-box .desc .item a img{
margin: 0 4px 0 13px;
}
.connect .container .content .left-box .row{
margin-top: 20px;
}
.connect .container .content .left-box .row p{
margin-top: 17px;
padding-bottom: 17px;
border-bottom: 1px solid #EAEEEF;
text-align: center;
}
.connect .container .content .right-box .num{
font-size: 35px;
margin-top: 24px;
}
.connect .container .content .right-box .item{
margin-bottom: 35px;
}
.connect .container .content .right-box .item:last-child{
margin-bottom: 0;
padding-top: 35px;
position: relative;
}
.connect .container .content .right-box .item:last-child::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 21px;
height: 1px;
background: #FFFFFF;
}
.connect .container .content .right-box .logo{
margin: 110px 60px 0 0;
}
.last-item >div img{
height: 15px;
}
.show-code {
position: fixed;
bottom: 40%;
right: 2%;
z-index: 10001;
cursor: pointer;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.show-code .code {
width: 124px;
height: 176px;
background: #ffffff;
box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.08);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #676a71;
font-size: 14px;
}
.show-code .code img {
margin-bottom: 12px;
}
.back-top {
width: 41px;
height: 41px;
background: #ffffff;
box-shadow: 0px 0px 88px 0px rgba(0, 0, 0, 0.08);
border-radius: 50%;
text-align: center;
padding-top: 10px;
margin-top: 20px;
}
/* 登录页面 */
.login-main{
background-image: url(../img/login-bg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding: 37px 50px;
width: 100%;
height: calc(100vh - 66px);
}
.login-main .form-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
}
.login-main .top .right-box ul{
display: flex;
}
.login-main .top .right-box ul li{
width: 84px;
height: 38px;
line-height: 38px;
border-radius: 5px;
text-align: center;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
color: #fff;
margin-left: 10px;
}
.login-main .top .right-box ul li a{
display: block;
width: 100%;
height: 100%;
}
.login-main .top .right-box ul li.active{
color: #333;
background: #fff;
}
.login-main .form-box{
background-image: url(../img/lbox-bg.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 10px;
width: 511px;
height: 514px;
padding: 60px 74px 40px;
position: relative;
}
.login-main .form-box h3{
text-align: center;
margin-bottom: 40px;
}
.login-main .form-box .fill-box.password-box{
margin: 27px 0 45px;
}
.login-main .form-box .fill-box span{
color: #1763b1;
}
.login-main .form-box .fill-box .row{
margin-top: 14px;
}
.login-main .form-box .fill-box .row .fill-info{
width: 100%;
height: 48px;
background: #fff;
display: flex;
align-items: center;
padding-left: 15px;
}
.login-main .form-box .fill-box .row .fill-info .icon-box{
position: relative;
padding-right: 12px;
padding-top: 4px;
}
.login-main .form-box .fill-box .row .fill-info input{
flex: 1;
line-height: 48px;
padding: 0 15px;
font-size: 16px;
color: #333;
}
.login-main .form-box .fill-box .row .fill-info input::placeholder{
color: #999;
}
.login-main .form-box .fill-box .row .fill-info .icon-box::before{
content: '';
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 20px;
background-color: rgb(21, 97, 175);
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.login-btn {
width: 100%;
line-height: 50px;
text-align: center;
color: #fff;
background-color: rgb(27, 103, 181);
cursor: pointer;
}
.login-main .form-box .link {
text-align: center;
font-size: 14px;
color: #333;
margin-top: 37px;
}
.login-main .form-box .link span{
font-size: 12px;
margin: 0 5px;
}
.login-main .form-box .link a:hover{
color: #1763b1;
}
.forgetPassword .form-box .fill-box.password-box, .register .form-box .fill-box.password-box{
margin: 0;
}
.forgetPassword .form-box .fill-box .row ,.register .form-box .fill-box .row{
margin-top: 0;
margin-bottom: 20px;
}
.form-box .fill-box .row .send-code {
width: 91px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 14px;
color: #fff;
border-radius: 5px;
background-color: rgb(27, 103, 181);
margin-right: 4px;
}
.register .form-box{
height: 671px;
}
.form-box .radio-row{
display: flex;
align-items: center;
margin-bottom: 34px;
}
.radio-row input[type="radio"]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
outline: none;
cursor: pointer;
border-radius: 50%;
margin: 0;
background-color: rgba(27, 103, 181,0.129);
width: 27px;
height: 27px;
margin-right: 10px;
}
.radio-row input[type="radio"]::before{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
background: #FFF;
width: 13px;
height: 13px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.radio-row input[type="radio"].active::before{
background: rgb(27, 103, 181);
}
.radio-row p{
font-size: 14px;
}
.radio-row p a{
cursor: pointer;
}
.register{
position: relative;
}
.register .form-box .link a,.register .form-box .link a:hover{
color: #e60000;
}
.registerTxt{
display: none;
}
.registerTxt .mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0,0.431);
z-index: 999;
}
.registerTxt .pop{
width: 608px;
height: 698px;
background-color: rgb(255, 255, 255);
padding: 30px 22px;
position: relative;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1000;
}
.registerTxt .pop h3{
text-align: center;
padding-bottom: 24px;
border-bottom: 1px solid rgb(242, 242, 242);
}
.registerTxt .article{
margin-top: 20px;
line-height: 30px;
max-height: 465px;
overflow-y: auto;
overflow-x: hidden;
}
.registerTxt .article p{
width: 100%!important;
}
.sure-btn{
width: 135px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: rgb(27, 103, 181);
position: absolute;
bottom: 35px;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
}
.registerTxt .close{
position: absolute;
top:-22px;
right: -22px;
cursor: pointer;
}
.form-box .errow-tips{
display: none;
padding: 10px 18px;
border-radius: 4px;
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
color: #fff;
background-color: rgba(0, 0, 0,0.431);
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
@media (max-width: 1680px) {
/* .container {
width: 1400px;
} */
.banner {
height: 350px !important;
}
.about-panel .data-box ul .tnumber {
font-size: 35px;
}
.spe-container{
width: 1000px;
}
.connect{
height: 660px;
}
.connect .container .content .left-box,.connect .container .content .right-box{
height: 350px;
}
footer .container {
padding-top: 0;
align-items: center;
}
.nav-menu,
.need-menu,
.contact-menu {
padding-top: 30px;
}
.connect .container .content .right-box .logo{
margin: 90px 0 0 0;
}
.connect .container .content .left-box{
padding-right: 60px;
}
}
@media (max-width: 1480px) {
/* .container {
width: 1200px;
} */
.banner {
height: 290px !important;
}
footer{
height: auto;
background-size: cover;
padding-bottom: 30px;
}
footer .container{
flex-wrap: wrap;
}
footer .last-menu .row,footer .footer-menu.last-menu .row .menu-title{
text-align: right;
}
.first-menu {
width: 100%;
}
.connect .container .content .left-box .row{
display: none;
}
.connect .container .content .right-box .logo{
margin: 90px 0 0 0;
}
.login-main .form-box{
width: 360px;
height: auto;
padding: 40px 30px 20px;
}
.login-main .form-box h3{
margin-bottom: 30px;
}
.login-main .form-box .fill-box.password-box{
margin: 20px 0 30px;
}
.login-main .form-box .link{
margin-top: 20px;
}
.specopyright{
height: 40px;
line-height: 40px;
}
.login-main{
height: calc(100vh - 40px);
}
.login-main .form-box .code-box .row .fill-info input{
width: 60%;
}
.forgetPassword .form-box .fill-box.password-box, .register .form-box .fill-box.password-box{
margin: 0;
}
.forgetPassword .form-box .fill-box .row ,.register .form-box .fill-box .row{
margin-top: 0;
margin-bottom: 20px;
}
.register .form-box .fill-box .row {
margin-bottom: 10px;
}
.form-box .radio-row{
margin-bottom: 14px;
}
.register .form-box .link{
margin-top: 10px;
}
.register .form-box{
padding: 30px 20px 10px;
}
.register .form-box h3{
margin-bottom: 20px;
}
.registerTxt .pop{
width: 500px;
height: auto;
padding-bottom: 90px;
}
.registerTxt .article{
max-height: 320px;
}
.sure-btn{
bottom: 15px;
}
}
@media (max-width: 1200px) {
/* .container {
width: 990px;
} */
.spe-container{
width: 860px;
}
.pro-show .bd .pic-box, .pro-lists ul li .pic-box{
height: 350px;
}
.pro-show .bd .swiper-slide .watch-more, .pro-lists ul li .watch-more{
height: 300px;
}
.connect .container .content .left-box{
padding: 60px 30px 0 25px;
}
.connect .container .content .right-box{
padding: 60px 50px 0 25px;
}
.connect .container .content .right-box .num{
font-size: 24px;
margin-top: 20px;
}
}
@media (max-width: 1000px) {
.container {
/* width: 750px; */
}
.logo-pic {
width: 110px;
}
header .container{
width: 100%;
padding: 0 30px;
}
header .nav-box .search,header .container .icon {
display: none;
}
.banner .icon {
bottom: -60px;
}
.banner .icon img{
width: 100px;
}
.banner .banner-name{
font-size: 18px;
}
.nav{
margin-right: 0;
}
.mf12{
font-size: 12px;
}
.mf14{
font-size: 14px;
}
.mf16{
font-size: 16px;
}
.mf18{
font-size: 18px;
}
.mf20{
font-size: 20px;
}
.mf24{
font-size: 24px;
}
.connect .container .content{
flex-wrap: wrap;
}
.connect .container .content .left-box, .connect .container .content .right-box{
width: 100%;
height: 240px;
padding-top: 20px;
}
.connect{
height: 800px!important;
}
.connect .container .content .left-box h3{
padding-bottom: 10px;
}
.connect .container .content .left-box .desc .item{
margin-top: 20px;
}
.connect .container .content .right-box .item:last-child{
padding-top: 20px;
}
.connect .container .content .right-box .item{
margin-bottom: 20px;
}
.connect .container .content .right-box .logo{
margin: 80px 70px 0 0;
}
}
@media (max-width: 750px) {
body{
font-size: 14px;
}
.container{
/* width: 640px; */
width: 100%;
padding: 0 10px;
}
.about-panel .data-box {
padding: 10px;
}
.news .top .hd {
width: 100% !important;
}
.pro-show .hd {
width: 100% !important;
}
.spe-container{
width: 640px;
}
header .top{
display: none;
}
header.open .nav {
padding: 0 20px;
}
header .nav-box{
color: #333;
background: #fff;
height: 60px;
position: relative;
padding-top: 20px;
}
header .nav-box .spe-container{
height: 100%;
line-height: normal;
padding: 0 10px;
position: fixed;
height: 60px;
top: 0;
padding-top: 20px;
background-color: #fff;
z-index: 100;
}
header .nav-box .burger {
display: block;
width: 20px;
height: 6px;
position: relative;
z-index: 1001;
cursor: pointer;
margin-top: 10px;
}
header .nav-box .nav{
display: none;
}
header .nav-box .logo-pic{
width: 100px;
}
.burger-line1,
.burger-line2,
.burger-line3 {
width: 20px;
height: 2px;
background-color: #333;
}
.burger-line1 {
position: absolute;
top: -6px;
}
.burger-line3 {
position: absolute;
top: 6px;
}
.nav-box.open .nav {
display: grid;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background-color: rgba(255, 255, 255, 0.8);
grid-auto-rows: max-content;
justify-items: end;
padding: 0 30px;
opacity: 0;
animation: slideDown 0.6s ease-out forwards;
z-index: 1000;
}
.nav-box.open .nav > * {
color: #333;
animation: showMenu 0.5s linear forwards;
font-size: 18px;
margin: 10px 0;
opacity: 0;
display: block;
}
.nav-box.open .burger-line1,
.nav-box.open .burger-line2,
.nav-box.open .burger-line3 {
background-color: #333;
transition: 0.4s ease;
}
.nav-box.open .burger-line1 {
transform: rotate(45deg) translate(3px, 5px);
}
.nav-box.open .burger-line2 {
transform: translateX(5px);
opacity: 0;
}
.nav-box.open .burger-line3 {
transform: rotate(-45deg) translate(3px, -5px);
}
.nav ul{
height: 56px;
line-height: 56px;
}
.nav ul .item {
padding: 0;
text-align: right;
}
.nav ul .item a {
padding: 0;
font-size: 20px;
}
.nav ul .item:hover, .nav ul .item.active{
color: #0058B2;
}
.banner {
height: 200px;
}
.same-title h3{
font-size: 16px;
}
.same-title .en-txt{
font-size: 14px;
}
.pro-show .bd .pic-box, .pro-lists ul li .pic-box{
height: 200px;
}
.pro-show .bd .swiper-slide .watch-more, .pro-lists ul li .watch-more{
width: 90%;
height: 160px;
opacity: 1;
}
.pro-show .bd .swiper-slide .name, .pro-lists ul li .name{
height: 40px;
line-height: 40px;
}
.pro-show .bd .swiper-slide .watch-more p, .pro-lists ul li .watch-more p{
font-size: 12px;
}
.pro-show .bd .swiper-slide .watch-more a img, .pro-lists ul li .watch-more .flexcenter img{
width: 24px;
margin-bottom: 8px;
}
.prev{
right: 50px;
}
.about-panel .data-box{
height: 120px;
padding-top: 30px;
}
.about-panel .data-box ul .tnumber{
font-size: 24px;
}
.about-panel .data-box ul .num .add,.unit{
font-size: 12px;
}
.about-panel .data-box ul .num .add{
top: -4px;
}
footer .container {
padding-top: 30px;
padding-bottom: 20px;
}
footer .logo-pic{
width: 140px;
margin: 0 auto;
}
footer .footer-menu{
width: 100%;
margin-top: 20px;
}
footer .footer-menu.nav-menu,footer .footer-menu.need-menu{
display: none;
}
footer .footer-menu .title{
padding-bottom: 16px;
}
footer .nav-menu ul li,footer .footer-menu .desc .item{
margin-bottom: 10px;
}
footer .contact-menu .desc .tel{
font-size: 18px;
}
footer .last-menu .row, footer .footer-menu.last-menu .row .menu-title{
text-align: center;
}
footer .footer-menu.last-menu .row .menu-title{
margin-top: 10px;
}
footer .last-menu,footer .contact-menu{
width: 100%;
margin-top: 20px;
}
.copyright{
height: auto;
line-height: normal;
padding: 10px 10px;
font-size: 12px;
flex-wrap: wrap;
}
.same-more{
margin: 22px auto 0;
width: 120px;
}
.same-more::after{
width: 120px;
top: -4px;
left: -4px;
}
.page-box{
margin-top: 40px;
}
.page-btn{
width: 90%;
margin-top: 20px;
flex-wrap: wrap;
}
.page-btn a{
width: 100%;
margin-bottom: 10px;
}
.page-btn a::before{
width: 100px;
top: 2px;
left: -4px;
}
.connect .container .content .left-box{
padding: 20px 15px 0;
}
.connect .container .content .right-box .logo{
margin: 90px 0 0;
}
.connect .container .content .right-box .logo img{
width: 100px;
}
.connect .container .content .right-box .num{
font-size: 18px;
}
.login-main{
padding: 40px 15px;
}
.login-main .top{
align-items: center;
}
.login-main .form-box{
width: 90%;
height: auto;
padding: 40px 15px 20px;
}
.login-main .form-box h3{
font-size: 20px;
margin-bottom: 20px;
}
.login-main {
height: calc(100vh - 50px);
}
.register{
padding-top: 20px;
}
.specopyright{
height: 50px;
}
.registerTxt .pop{
width: 86%;
}
.registerTxt .pop h3 {
font-size: 20px;
padding-bottom: 14px;
}
.registerTxt .article{
line-height: 2;
}
header .nav-box .login{
margin-left: 0;
}
@keyframes slideDown {
from {
height: 0;
opacity: 0;
}
to {
height: 100vh;
opacity: 1;
padding-top: 80px;
}
}
@keyframes showMenu {
from {
opacity: 0;
transform: translateY(-1vh);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
@media (max-width: 640px) {
.mshow {
display: block;
}
.mhide {
display: none;
}
.container ,.spe-container{
width: 100%;
}
.next,
.prev {
width: 30px;
height: 30px;
}
.next img,
.prev img {
height: 20px;
}
header.open .menu {
padding: 0 20px;
}
.page-box a {
font-size: 14px;
}
}